<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button>发送ajax</button>
 <div>
<!--     <p id="showId"></p>-->
<!--     <p id="showName"></p>-->
<!--     <p id="showClassName"></p>-->
<!--     <p id="showTeacherName"></p>-->
 </div>

</body>
</html>
<script src="js/jquery-3.1.0.min.js"></script>
<script>

   /*
       ajax:  Asynchronous(异步) JavaScript and XML（异步的 JavaScript 和 XML）。
       ajax：就是异步的网页的网页的局部刷新技术
       ajax的核心对象 XMLHttpRequest
    */

   $(()=>{
        $("button").click(()=>{
            //alert("1111");
            /*
               在jquery中发送ajax有两个方式
               1 简写
                  $.get(参数)  方get请求
                  $.post参数  发post请求
               2 全写（完成的写法）
                   $.ajax(json对象的参数)
             */
           //回调函数中的第一个参数  就是服务器回来的数据
         /*   $.get("http://localhost:8080/web_3_ajax/test",(data)=>{
               // console.log(data);
                 $("#showId").html(data.id);
                $("#showName").html(data.student_name);
                $("#showClassName").html(data.classBean.name);
                $("#showTeacherName").html(data.classBean.teacherBean.name);

            },"json");*/

            $.post("http://localhost:8080/web_3_ajax/test",(data)=>{
                console.log(data);
                let str="";
                //循环集合
                // for (let i = 0; i < data.length; i++) {
                //     let stuBean = data[i];
                //     str+=`<p>${data[i].id}</p><p>${data[i].student_name}</p><p>${data[i].classBean.name}</p><p>${data[i].classBean.teacherBean.name}</p><hr/>`
                // }

               //jquery提供的循环方法  i：就是下标
                 /*$.each(data,(i)=>{
                   str+=`<p>${data[i].id}</p><p>${data[i].student_name}</p><p>${data[i].classBean.name}</p><p>${data[i].classBean.teacherBean.name}</p><hr/>`;
                 })*/
                //jquery提供的循环方法  i：就是下标  stu:就是别名 相当于 data[i]
                $.each(data,(i,stu)=>{
                    str+=`<p>${stu.id}</p><p>${stu.student_name}</p><p>${stu.classBean.name}</p><p>${stu.classBean.teacherBean.name}</p><hr/>`;
                })


                $("div").html(str);


            },"json")


        });
   });


</script>